* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 14px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-variant: tabular-nums;
  font-size: 1rem;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;

  border: 0;
  margin: 0;
  padding: 0;

  -webkit-print-color-adjust: exact;
}
a,
input,
button,
select,
table,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  //color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  //color: #23527c;
  text-decoration: none;
}
a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
figure {
  margin: 0;
}
img {
  vertical-align: middle;
}

[v-cloak] {
  display: none!important;
}

.absolute(){
  position: absolute;
}
.full(@top:0,@left:0,@right:0,@bottom:0){
  top: @top;
  left: @left;
  right: @right;
  bottom: @bottom;
}

.crane {

  >.dashboard {
    .full();
    .absolute();
    background-color: #444444;

    > .screen {
      .full(0, 0, 0, 260px);
      .absolute();

      display: flex;
      flex-direction: column;
      align-items: center;

      > .name {
        font-size: 18px;
        color: #eeeeee;
        padding: 20px 0;
      }
    }

    > .controls {
      .full(auto, 0, 0, 0);
      height: 260px;
      .absolute();

      /*暂时与screen重复*/
      display: flex;
      flex-direction: column;
      align-items: center;
      //border-top: 1px solid #999;

      //margin-top: 20px;
    }

    > .console {
      .full(auto);
      height: 30px;
      .absolute();
    }
  }
  >.tables{
    .full();
    .absolute();
    background-color: #444444;

    .table{

    }
  }
}

@HouseLeftPadding: 20px;
/*车间长度*/
@WorkshopWidth: 1000px;
/*车间墙宽度*/
@WorkshopBorderWidth: 5px;
/*车间与天车距离*/
@Workshop2MachineWidth: 20px;
/*天车与天车距离*/
@Machine2MachineWidth: 50px;

.house{
  flex: 1;
  position: relative;
  margin-top: 5%;

  >.workshop{
    width: @WorkshopWidth;
    height: 50%;

    border: @WorkshopBorderWidth solid #2b9bff;
  }
  >.machine{
    top: -45px;
    height: calc(~"50% + 45px");
    transition: left 0.1s linear 0s;
    transition-timing-function:linear;
    .absolute();

    >.axis{
      background: #ff5937;
      width: @WorkshopBorderWidth;
      height: 100%;
    }
    >.text{
      color: #eeeeee;
      margin-left: -4px;
      padding-bottom: 5px;
    }
    >.label{
      color: #eeeeee;
      margin-left: -4px;
      padding-top: 5px;
    }
  }
  >.machine.left{
    left: @Workshop2MachineWidth;
  }
  >.machine.right{
    left: @WorkshopWidth - @Workshop2MachineWidth;
  }

  >.ruler{
    display: flex;
    align-items: flex-end;
    height: 12px;
    margin-top: 50px;
    //margin-left: @HouseLeftPadding - 1;
    border-left: 1px solid #cccccc;
    >.scale{
      height: 6px;
      width: 10px;
      border-right: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc;
    }
    >.scale.node{
      height: 10px;
    }
    >.scale.half{
      height: 8px;
    }
  }
  >.tags{
    display: flex;
    margin-top: 4px;
    margin-left: -7px;

    >.tag{
      width: 100px;
      color: #cccccc;
    }
    >.tag:last-child{
      width: auto;
    }
  }
}

.control{
  z-index: 998;
  color: #cccccc;
  width: 360px;
  height: 240px;
  //display: flex;
  //flex-direction: column;
  //padding-top: 5px;
  border: 1px solid #999;
  border-radius: 15px;

  background-color: #444444;

  //margin-left: -20px;

  .item{
    height: 14%;

    display: flex;
    flex-direction: row;
    align-items: center;

    >.title{
      font-size: 17px;
      text-align: center;
      letter-spacing: 5px;
      width: 100%;
      color: #eeeeee;
    }
    >.text{
      font-size: 16px;
      text-indent: 24px;
      letter-spacing: 5px;
    }
    >.text.status{
      text-indent: 6px;
      margin-left: 17px;
    }
    >.text.stop{
      color: #ff5937;
    }
    >.text.start{
      color: #2fc1c1;
    }
  }
}

.button{
  color: #ffffff;
  font-size: 16px;
  width: 100px;
  height: 25px;
  line-height: 22px;
  text-align: center;

  border: 1px solid #999999;
  border-radius: 6px;

  margin-left: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  .icon{
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 18px 18px;
  }
  .icon.left{
    background-image: url("../images/left.png");
  }
  .icon.right{
    background-image: url("../images/right.png");
  }
}
.button:hover{
  border: 1px solid #2b9bff;
}
.button.selected{
  border: 1px solid #2b9bff;
  background-color: #2b9bff;
}
.button.red{
  border: 1px solid #ff5937;
  background-color: #ff5937;
}
.button.green{
  border: 1px solid #2fc1c1;
  background-color: #2fc1c1;
}
.button.log{
  font-size: 14px;
}
.menus{
  .full(0,0,auto,auto);
  .absolute();
  z-index: 999;
  background-color: #444444;

  >.menu{
    width: 50px;
    height: 50px;
    border: 1px solid #999999;
    margin: 10px 0 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    >.icon{
      width: 24px;
      height: 24px;
      background-repeat: no-repeat;
      background-size: 24px 24px;
    }
    >.icon.dashboard{
      background-image: url("../images/dashboard.png");
    }
    >.icon.dashboard.selected{
      background-image: url("../images/dashboard.selected.png");
    }
    >.icon.table{
      background-image: url("../images/bars.png");
    }
    >.icon.table.selected{
      background-image: url("../images/bars.selected.png");
    }
  }
}

.tables{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #eeeeee;

  >.title{
    font-size: 18px;
    padding: 20px 0;
  }
  .table{
    width: 800px;
    color: #eeeeee;
    border: 1px solid #999999;

    .center{
      text-align: center;
    }
    .right{
      text-align: right;
      padding-right: 5px;
    }

    tr{
      height: 30px;
    }

    .columns{
      background-color: #eeeeee;
      .column{
        color: #333333;
        border-right: solid 1px #999999;
        border-bottom: solid 1px #999999;
      }
      .column:last-child{
        border-right: solid 0 #999999;
      }
    }
    .rows{
      background-color: #fcfcfc;
      .cell{
        color: #111111;
        border-right: solid 1px #999999;
        border-bottom: solid 1px #999999;
      }
      .cell:last-child{
        border-right: solid 0 #999999;
      }
      .cell.vital{
        color: #067de7;
      }
    }
    .empty{
      background-color: #fcfcfc;
      td{
        color: #111111;
      }
    }
  }
}
.pager{
  width: 800px;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #eeeeee;

  height: 50px;

  >.total{
    width: 200px;
  }
  >.page{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    >a{
      color: #eeeeee;
      margin: 0 0 0 10px;
    }
    >a.disable{
      color: #999999;
    }
  }
}